<template>
  <div
    @tap="showInfo"
    class="list-item"
  >
    <div
      v-html="item.icon"
      class="user-icon"
    />
    <div class="content">
      <div class="title">
        <div class="title-content">
          <!-- <div
            v-if="item.isNew"
            class="new"
          /> -->
          <span style="overflow: hidden; text-overflow: ellipsis; word-break: break-all;">{{ item.title }} </span> 
          <span class="time">{{ item.time }}</span>
        </div>
      </div>
      <div class="remark">
        <span style="overflow: hidden; text-overflow: ellipsis; word-break: break-all;">{{ item.remark }} </span> 
        <!-- <div class="buttons">
          <button
            v-if="item.delayBtn"
            @tap="delay"
            type="button"
            class="delay mui-btn je-audio-btn"
          >
            {{ item.delayBtnText }}
          </button>
          <button
            :class="[item.priorityBtnIcon]"
            @tap="priority"
            type="button"
            class="priority mui-btn star-btn mui-icon fa je-audio-btn"
          >
            {{ item.priorityBtnText }}
          </button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'ListItem',
    props: {
      data: {
        type: Object,
        default() {
          return {};
        },
      },
      type: {
        type: String,
        default() {
          return '';
        },
      },
    },
    data() {
      return {
        doReadInfo:{},
        wfFlowInfo: {
          to_submit: '送交给我',
          to_jump: '送交给我',
          to_allot: '调拨给我',
          to_returnsubmit: '送交给',
          to_rollback: '退回给我',
          to_withdraw: '取回',
          to_entrust: '委托给我',
          to_returnback: '退回给我',
          to_callentrust: '撤销委托',
          to_transmit: '转办给我',
          to_taketask: '领取任务',
          to_end: '流程结束',
          to_round: '传阅给我',
          to_takeround: '审阅',
          to_circular: '办理',
          to_reject: '驳回',
          no: '未处理',
          yes: '已处理',
          to_pass: '通过',
          to_nopass: '不通过',
          to_waiverpass: '弃权',
          to_userdiy: '转交',
          to_backuserdiy: '转交',
        },
      };
    },
    computed: {
      item() {
        const row = this.data;
        const {type} = this;
        const item = {
          id: row.taskId,
          proccessName: row.TASK_PROCESSNAME,
          funcName: row.TASK_NAME,
          user: row.TASK_STARTUSERID,
          userId: row.TASK_STARTUSER,
          shortname: '',
          remark: row.TASK_CONTENT,
          time: JE.dateFormat4Time(row.TASK_TASKTIME),
          endTime: JE.dateFormat4Time(row.TASK_ENDTIME),
          taskName: row.TASK_CURRENTTASK,
          // priority: row.priority,
          // delay: row.delay,
          type,
          // isNew: row.isNew,
          // priorityBtnText: row.priority == '1' ? '取消' : '加星',
          // priorityBtnIcon: row.priority == '1' ? 'fa-star' : 'fa-star-o',
        };
        row.workflow_type = type;
        // 流程信息
        // alert(row.bean.SY_LASTFLOWINFO);
        var flowObj=(JE.toObj(row.TASK_FLOWINFO) || {})[row.TASK_CURRENTTASK];
			  flowObj = JE.isNotEmpty(flowObj) ? flowObj :'{}';
        // let flowObj = JE.decode(row.bean.SY_LASTFLOWINFO || '{}');
        // flowObj = JE.isNotEmpty(flowObj) ? eval("flowObj."+item.taskName) : {};
        // 经办，我的  是当前人
        if (['PI_PREAPPROV', 'PI_DELAY'].indexOf(item.type) == -1) {
          for (const wf in this.wfFlowInfo) {
            if (this.wfFlowInfo[wf].indexOf('我') != -1) {
              this.wfFlowInfo[wf] = this.wfFlowInfo[wf].split('我')[0];
            }
          }
        } else {
          // 审批，延迟  是发起人
          // item.delayBtn = true;
          // item.delayBtnText = item.type == 'PI_PREAPPROV' ? '加入延迟' : '取消延迟';
          item._taskName = '申请人';
        }
        item.user = JE.isNotEmpty(flowObj.userName) ? flowObj.userName : row.TASK_FLOWUSER;// 当前人
        item.userId = JE.isNotEmpty(flowObj.userId) ? flowObj.userId : row.TASK_FLOWUSERID;
        // 头像
        item.icon = JE.getUserPhoto(item.userId, true);

        const {displayConfigInfo} = row;

        // 标题
        item.title = JE.isNotEmpty(item.user) ? item.user : '';
        let tranName = '';
        if (JE.isNotEmpty(flowObj)) {
          if (['PREAPPROV', 'DELAY'].indexOf(item.type) == -1 && flowObj.tranCode) {
            // tranName = this.wfFlowInfo[flowObj.tranCode] + row.bean.SY_PREAPPROVUSERNAMES || '未知动作';
            if( this.wfFlowInfo[flowObj.tranCode].indexOf('我')!=-1){
              tranName = this.wfFlowInfo[flowObj.tranCode]  || '未知动作';
            }else{
              tranName = this.wfFlowInfo[flowObj.tranCode] + row.TASK_USERNAMES || '未知动作';
            }
          } else if (flowObj.tranCode) {
            tranName = this.wfFlowInfo[flowObj.tranCode] || '未知动作';
          } else {
            tranName = '送交给我';
          }
          if (JE.isNotEmpty(tranName)) {
            if (JE.isNotEmpty(displayConfigInfo)) {
              item.title = `${item.user}『已审批』`;
            } else {
              item.title = `${item.user}『${tranName}』`;
            }
          }
        } else if (JE.isNotEmpty(row.TASK_FLOWUSER)) {
          item.title = row.TASK_FLOWUSER;
        }
        item.title += `，${item.funcName}`;
        
        // 意见
        item.remark = row.TASK_CONTENT;
        // else {
        //   item.remark = `需处理任务:${item.taskName}`;
        //   if (JE.isNotEmpty(flowObj.comment)) {
        //     item.remark = `意见:${flowObj.comment}`;
        //   }
        //   item.remark = item.TASK_CONTENT;
        // }
        if(item.remark.length>18){
          item.remark = item.remark.substring(0,18)+'...';
        }
        let time = item.time;
        if(time.indexOf('-')!=-1){
          var month = time.substring(0,2);
          var day = time.substring(3,5)
          item.time = `${parseInt(month)}月${parseInt(day)}日`;
        }
        let endTime = item.endTime || '';
        if(endTime.indexOf('-')!=-1){
          var month = endTime.substring(0,2);
          var day = endTime.substring(3,5)
          item.endTime = `${parseInt(month)}月${parseInt(day)}日`;
        }
        if(row.TASK_END=='1'){
          item.time=item.endTime;
        }
        item.taskName = item._taskName || item.taskName;
        return item;
      },
    },
    created() {
    },
    methods: {
      // getFlowCommentInfo(taskInfo){
      //   var bean=taskInfo;
      //   if(JE.isNotEmpty(bean.SY_LASTFLOWINFO)){
      //   var flowObj=JE.toObj(bean.SY_LASTFLOWINFO);
      //   if(flowObj){
      //     bean.SY_LASTFLOWCOMMENT=flowObj.comment;
      //   }
      //     }
      //     var comment="需处理任务:"+taskInfo.taskName;
      //     if(JE.isNotEmpty(bean.SY_LASTFLOWCOMMENT)){
      //         comment="意见:"+bean.SY_LASTFLOWCOMMENT;
      //     }
      //     var displayConfigInfo=taskInfo.displayConfigInfo;
      //     if(!Ext.isEmpty(displayConfigInfo)){
      //         comment=JE.toXT(displayConfigInfo,taskInfo);
      //     }
      //     return comment;
      // },
      // getTitle(item) {
      //   const time = Ext.Date.format(Ext.Date.parse(item.createTime, 'Y-m-d H:i:s'), 'm月d日');
      //   return `${this.formatKeyword(this.getFlowUserInfo(item, this.type), this.keyword)}，${item.funcName} <span class="time">${time}</span>`;
      // },
      formatKeyword(text, keyword) {
        return keyword ? text.replaceAll(keyword, `<span class="keyword">${keyword}</span>`) : text;
      },
      getLocalLang: function(attr, common) {
        if (!JE.local) {
          return {};
        }
        var obj = JE.eval("JE.local.lang." + attr);
        if (common) {
          Ext.applyIf(obj, JE.local.lang.common);
        }
        return Ext.value(obj, {});
      },
    /**
	 * 获取待办任务  首页工作台展示
     * @param taskInfo
     * @returns {*}
     */
    getFlowUserInfo(taskInfo, type) {
      const bean = taskInfo;
      // var displayConfigInfo=taskInfo.displayConfigInfo;
      let wfLogLang ={
	    to_submit:"送交给我",
        to_jump:"送交给我",
        to_allot:"调拨给我",
        to_returnsubmit:"送交给我",
        to_rollback:"退回给我",
        to_withdraw:"取回",
        to_entrust:"委托给我",
        to_returnback:"退回给我",
        to_callentrust:"撤销委托",
        to_transmit:"转办给我",
        to_taketask:"领取任务",
        to_end:"流程结束",
        to_round:"传阅给我",
        to_takeround:"审阅",
        to_circular:"办理",
        to_reject:"驳回",
        no:"未处理",
        yes:"已处理",
        to_pass:"通过",
        to_nopass:"不通过",
        to_waiverpass:"弃权",
        to_userdiy:"转交",
        to_backuserdiy:"转交"
	};
      if (type) {
        if (type == 'APPROVED' || type == 'OWNER') {
          for (const wf in wfLogLang) {
            if (wfLogLang[wf].indexOf('我') != -1) {
              wfLogLang[wf] = wfLogLang[wf].split('我')[0];
            }
          }
        } else {
          wfLogLang = {
            to_submit: '送交给我',
            to_jump: '送交给我',
            to_allot: '调拨给我',
            to_returnsubmit: '送交给我',
            to_rollback: '退回给我',
            to_withdraw: '取回',
            to_entrust: '委托给我',
            to_returnback: '退回给我',
            to_callentrust: '撤销委托',
            to_transmit: '转办给我',
            to_taketask: '领取任务',
            to_end: '流程结束',
            to_round: '传阅给我',
            to_takeround: '审阅',
            to_circular: '办理',
            to_reject: '驳回',
            no: '未处理',
            yes: '已处理',
            to_pass: '通过',
            to_nopass: '不通过',
            to_waiverpass: '弃权',
            to_userdiy: '转交',
            to_backuserdiy: '转交',
          };
        }
      }
      if (JE.isNotEmpty(bean.TASK_FLOWINFO)) {
        if (bean.TASK_END == '1') {
          return `『${bean.TASK_STARTUSER}发起的』`;
        }
        const { TASK_CURRENTTASK } = bean;
        let flowObj = JE.toObj(bean.TASK_FLOWINFO)[TASK_CURRENTTASK];
        flowObj = JE.isNotEmpty(flowObj) ? flowObj : '{}';
        let tranName = '';
        if (type && flowObj) {
          if (type == 'APPROVED' || type == 'OWNER') {
            tranName = Ext.value(wfLogLang[flowObj.tranCode] + bean.TASK_USERNAMES, '未知动作');
          } else if (flowObj.tranCode) {
            tranName = Ext.value(wfLogLang[flowObj.tranCode], '未知动作');
          } else {
            tranName = '送交给我';
          }
        }
        if (JE.isNotEmpty(tranName)) {
          const userName = JE.isNotEmpty(flowObj.userName) ? flowObj.userName : bean.SY_LASTFLOWUSER;
          /* if(JE.isNotEmpty(displayConfigInfo)){
					return userName+"『已审批』";
        } */
          return `${userName}『${tranName}』`;
        } if (flowObj) {
          flowObj.userName;
        } else {
          return bean.TASK_FLOWUSER;
        }
      } else if (JE.isNotEmpty(bean.TASK_FLOWUSER)) {
        return bean.TASK_FLOWUSER;
      } else {
        return '';
      }
    },
      // 查看详情
    // showInfo() {
    //   const self = this
    //   let item = self.data;
    //   let tableCode=item.TASK_VIEWTABLECODE;
    //   if(JE.isEmpty(tableCode)){
    //     tableCode=item.TASK_TABLECODE
    //   }
    //   JE.ajax({
    //     url: JE.getUrlMaps('je.core.getInfoById'), // 获得数据的地址
    //     params: {
    //       // 视图功能应该取的是视图的数据，否则会导致数据不完整
    //       tableCode: tableCode,
    //       pkValue: item.TASK_PKVALUE,
    //     },
    //   }).then((data) => {
    //     JE.showFunc(item.TASK_FUNCCODE,
    //       {
    //         page: 'form.html',
    //         // type:"form",
    //         values: data,
    //         id:data[`${item.TASK_FUNCCODE}_ID`]
    //       });
    //   });
    // },

      showInfo() {
        const self = this
        let data = self.data;
        if (self.type == 'PI_PREAPPROV') {
          const readUsers = data.TASK_READUSER;
          const userId = JE.USER.id;
          if(!readUsers.includes(userId)){
            const newReadUsers = JE.isNotEmpty(readUsers) ? `${self.doReadInfo.JE_CORE_TASK_ID},${data.JE_CORE_TASK_ID}` : data.JE_CORE_TASK_ID;
            JE.ajax({
              url:'/je/message/pcTask/doReadTask',
              params: {pkValue: newReadUsers,}
            })
            .then(function(data){
              self.doReadInfo = data.obj;
            });
          }
        }

        let tableCode=data.TASK_VIEWTABLECODE;
        if(JE.isEmpty(tableCode)){
          tableCode=data.TASK_TABLECODE
        }
        let page = '';
        if(data.TASK_TASKTYPE_CODE=='WF'){// 流程
          page='workflow';
        }
        if(data.TASK_TASKTYPE_CODE=='PRO'){// 业务办理
          page='form.html';
        } 
        if(data.TASK_TASKTYPE_CODE=='MSG'){// 业务提醒
          page='form.html';
        }
        JE.ajax({
          url: JE.getUrlMaps('je.core.getInfoById'), // 获得数据的地址
          params: {
            // 视图功能应该取的是视图的数据，否则会导致数据不完整
            tableCode: tableCode,
            pkValue: data.TASK_PKVALUE,
          },
        }).then((resultdata) => {
          JE.showFunc(data.TASK_FUNCCODE,
            {
            //   page: 'form.html',
            //   // type:"form",
            //   values: resultdata,
            //   id:resultdata[`${data.TASK_FUNCCODE}_ID`]
             page: page,
             values: resultdata,
              query: {
                id: data.TASK_PKVALUE,
                tableCode: tableCode
              }
            });
        });
       
      },
      /**
       * 加星
       */
      // priority() {
      //   window.event.stopPropagation();
      //   JE.playAudio4Btn();
      //   this.$set(this.data, 'priority', this.data.priority == '1' ? '0' : '1');
      //   JE.ajax({
      //     url: JE.getUrlMaps('je.core.wf.taskInfo.updateTaskPriority'),
      //     params: {taskId: this.data.taskId, priority: this.data.priority},
      //   });
      //   this.$emit('resetList');
      // },
      /**
       * 延迟
       */
      // delay() {
      //   window.event.stopPropagation();
      //   const me = this;
      //   JE.playAudio4Btn();
      //   const delay = this.data.delay == '1' ? '0' : '1';
      //   me.$set(this.data, 'delay', delay);
      //   JE.ajax({
      //     url: JE.getUrlMaps('je.core.wf.taskInfo.updateTaskDelay'),
      //     params: {taskId: this.data.taskId, delay: this.data.delay},
      //     callback() {
      //       if (delay == '1') {
      //         JE.refreshBadge({
      //           badge: -1, apkBadge: -1, code: 'JE-PLUGIN-WF', type: 'WF',
      //         });
      //         JE.msg('已加入我的延迟中...');
      //       } else {
      //         JE.refreshBadge({
      //           badge: 1, apkBadge: 1, code: 'JE-PLUGIN-WF', type: 'WF',
      //         });
      //         JE.msg('已取消延迟...');
      //       }
      //       me.$emit('refreshDelay', me.data);
      //     },
      //   });
      // },
    },
  };
</script>
<style lang="less" scoped>
  @import "~@/theme/index.less";

  .list-item {
    .proccessName {
      font-size: 12*@hd;
      padding-right: 50*@hd;
    }
    .taskName {
      font-size: 14*@hd;
      color: #8f8f94;
      float: right;
    }
    .user {
      color: #536DFE;
      font-size: 14*@hd;
      padding-left: 5*@hd;
    }
    .time-msg .new {
      margin-left: 5*@hd;
      border-radius: 50%;
      font-size: 0*@hd;
      padding: 3*@hd;
      background-color: #dd524d;
      display: inline-block;
      margin-right: 5*@hd;
      margin-bottom: 3*@hd;
    }
    .remark {
      color: #5f615f;
      padding: 4*@hd 0;
      font-size: 14px;
      // padding-right: 130*@hd;
      padding-right: 68*@hd;
      // white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      position: relative;
    }
    .time {
      // font-size: 14px;
      font-size: 14px;
      color: #8f8f94;
    }
    .buttons {
      position: absolute;
      right: 0;
      bottom: 3 * @hd;
      font-size: 12*@hd;
      line-height: 24*@hd;
      display: flex;
      align-items: center;
      button {
        padding: 0 12px;
        font-size: 11*@hd;
        // margin:0 2*@hd;
        border: 0;
      }
      .star-btn {
        margin-right: 0;
        padding-right: 0;
        font-size: 14*@hd;
        &:before {
          color: #FFD37F;
        }
      }
      .delay {
        background-color: #FF8C8C;
        border-color: #FF8C8C;
        color: #FFFFFF;
        padding: 4px 12px;
      }
    }
    .title {
      color: #3F3F3F;
      font-size: 16*@hd;
      .title-content {
        overflow: hidden;
        // white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 60 * @hd;
      }
    }
    .content {
      padding-left: 50*@hd;
      .time {
        position: absolute;
        right: 10*@hd;
        top: 10*@hd;
        font-size: 14px;
        color: #5f615f;
      }
    }
  }

</style>

<style lang="less">
  @import "~@/theme/index.less";

  .list-item {
    .user-icon {
      position: absolute;
      left: 10*@hd;
      width: 44*@hd;
      /*通用头像样式*/
      .je-user-photo {
        width: 44*@hd;
        height: 44*@hd;
        border-radius: 100%;
        display: inline-block;
      }
      .je-user-photo.photo-text {
        background-color: #efa544;
        color: #fff;
        text-align: center;
        line-height: 44*@hd;
        font-size: 12*@hd;
      }
    }
  }
</style>
